<script>
/**
 * 这是首页的内容部分
 * 未来首页的内容，每个区块独立使用一个模板
 */
//import Header from '../views/Header.vue'
// import Footer from '../views/Footer.vue'
// import panel from '../views/user/panel.vue'
 //import Index from '../views/index/Index.vue'
 export default {
  name: 'App',
  data () {
    return {
      msg: 'Welcome to Your Vue.js Homebody',
      show: true
    }
  },
  //components:{"app-header":Header,"app-footer":Footer,"panel":panel},
  methods:{
	  test(){
		 // this.$router.push('/nn')
		  //this.$store.state.islogin=!this.$store.state.islogin
		 // console.log('username',this.$store.state.user_name)
		  //this.$store.commit("showUserName");
	  },
	  
  },
  created(){
	//  this.islogin()
  }
}

</script>

<template>
<div>
<transition name="slide-right">
      <router-view
      class="view site_w"
      keep-alive
      transition
      transition mode="out-in" >
    </router-view>
  </transition>
</div>
</template>

<style lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

.outLeftInRight-transition,
.fadeOutLeft-transition, 
.fadeInLeft-transition {
  transition: transform .3s ease-in-out;
}
/* 进入时的状态，从右开始 */
.outLeftInRight-enter,
.fadeInLeft-enter,
.fadeInLeft-leave {
  transform: translateX(100%);
}
/* 离开时的状态，向左移动 */
.outLeftInRight-leave,
.fadeOutLeft-enter,
.fadeOutLeft-leave {
  transform: translateX(-100%);
}

/*right start*/
  .slide-right-enter-active {
    transition: all .4s ease;
  }
  
  .slide-right-enter {
    opacity: 0.9;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
  
  .slide-right-leave {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  
  .slide-right-leave-active {
    transition: all .4s ease;
    opacity: .5;
    transform: translate3d(-20%, 0, 0);
    -webkit-transform: translate3d(-20%, 0, 0);
  }
  /*right end*/
.demo-grid div[class*="col-"] {
  color: #ccc;
  border: 0px solid #ddd;
}
</style>